<template>
    <div class="main-graph-instance">
        <div class="graph-arrange" ref="graphArrange"></div>
        <div class="graph-outline" ref="graphOutLine"></div>
    </div>
</template>
<script>
export default {
    props: ['GraphApi'],
    beforeDestroy() {
        this.GraphApi.destroy();
    },
    mounted() {
        let GraphApi = this.GraphApi;
        GraphApi.init(this.$refs.graphArrange);
        this.$nextTick(()=>{
            GraphApi.bindSubgroup();
        });

        GraphApi.on('dblclick', (graph, evt) => {
            let cell = evt.properties.cell;
            if (cell.edge == true){
                return;
            }
            graph.setSelectionCell(cell);
            this.$emit("handleNode", cell)
        })

        let outLine = new mxOutline(GraphApi.getGraph(), this.$refs.graphOutLine);
        outLine.setEnabled(true)
    }
}
</script>
<style scoped lang="less">
.main-graph-instance {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
        .graph-arrange {
            position: relative;
            overflow: hidden;
            width: 100%;
            height: 100%;
            cursor: default;
           // background-image: url('/img/graph/wires-grid.gif');
            background-image: url('~@/assets/imgs/graph/r-f.png');
            background-size: 100% 100%;
        }

        .graph-outline {
            position:absolute; 
            right: 8px; 
            bottom: 8px;
            width:200px;
            height:100px;
            border:solid #C0C4CC 1px;
            border-radius: 5px;
            z-index:1
        }
}
</style>